<template>
  <div class="IdInformation">
    <group>
      <x-input v-model="supplierData.idcard" title="身份证号码" type="number" placeholder="请填写身份证号码"></x-input>
    </group>
      <group title="请提交身份证正面照" class="ID">
        <img v-if="supplierData.idcard_zp" :src="supplierData.idcard_zp" alt="">
        <img v-else src="../assets/ID.png" alt="">
        <input @change="getZp" name="idcard_zp" class="file" type="file" accept="image/*">
      </group>
      <group title="请提交身份证反面照" class="ID">
        <img v-if="supplierData.idcard_fp" :src="supplierData.idcard_fp" alt="">
        <img v-else src="../assets/ID2.png" alt="">
        <input @change="getFp" name="idcard_fp" class="file" type="file" accept="image/*">
      </group>
    <div class="commit">
      <x-button @click.native="submit" type="primary">提交</x-button>
    </div>
  </div>
</template>
<script>
import { Group, XInput, XButton } from "vux";
export default {
  name: "IdInformation",
  data() {
    return {
      supplierData: {
        idcard: "",
        idcard_zp: "",
        idcard_fp: ""
      },
    };
  },
  methods: {
    getZp(e) {
      if (e.target.files.item(0)) {
        let formData = new FormData();
        let config = { headers: { 'Content-Type': 'multipart/form-data' } };
        formData.append("idcard_zp", e.target.files[0]);
        this.$http.post("/api/com.upload/privacy_image",formData,config).then(res => {
          this.supplierData.idcard_zp = res.data.data.files
        });
      }
    },
    getFp(e) {
      if (e.target.files.item(0)) {
        let formData = new FormData();
        let config = { headers: { 'Content-Type': 'multipart/form-data' } };
        formData.append("idcard_fp", e.target.files[0]);
        this.$http.post("/api/com.upload/privacy_image",formData,config).then(res => {
          this.supplierData.idcard_fp = res.data.data.files
        });
      }
    },
    submit() {
      this.$http.post('/api/supplier.supplier/update',this.supplierData).then(res=>{
        if(res.data.code){
          this.$vux.toast.show({
            text:'修改成功'
          })
          this.$router.go(-1)
        }
      })
    }
  },
  components: {
    Group,
    XInput,
    XButton
  },
  created() {
    this.$http.get("/api/supplier.supplier/read").then(res => {
      this.supplierData = res.data.data;
    });
  }
};
</script>

<style scoped lang="less">
.ID {
  position: relative;
  img {
    width: 80%;
    margin: 20px auto;
  }
  .file {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    opacity: 0;
  }
}
.commit {
  padding: 15px;
}
</style>

